<template>
  <div class="section-title">
    <h2 class="main">{{ title }}</h2>
    <p v-if="subtitle" class="sub">{{ subtitle }}</p>
  </div>
</template>

<script setup>
/**
 * SectionTitle 分区标题组件
 * @prop {String} title - 主标题
 * @prop {String} subtitle - 副标题（可选）
 */
defineProps({
  title: { type: String, required: true },
  subtitle: { type: String, default: '' },
})
</script>

<style scoped>
.section-title {
  margin-bottom: 1.5em;
  text-align: left;
}
.main {
  font-size: var(--font-size-h2);
  color: var(--text-primary);
  font-weight: 700;
  margin: 0 0 0.2em 0;
  line-height: 1.2;
}
.sub {
  font-size: var(--font-size-body);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .main {
    font-size: 1.3em;
  }
  .sub {
    font-size: 1em;
  }
}
</style>
